<template>
  <div class="boss">
    <head-page title="消息" style="border-bottom: 2px solid #dad9df;"></head-page>
    <!-- 视频区域 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
			<van-swipe-item
				class="rel"
				v-for="(item, index) in bannerList"
				:key="index"
			>
				<div class="mask fcc">
					<van-icon name="play-circle-o" size="42" color="#fff" />
				</div>
				<video
					@click="playVideo(item)"
					class="video"
					x5-video-orientation="landscape"
					preload="auto"
					:src="item.posterUrl"
				></video>
			</van-swipe-item>
		</van-swipe>
    </div>
</template>

<script>
export default {
   data(){
    return{
        bannerList: [
				{
					id: '1',
					name: '123',
					posterImg: '/profile/upload/2023/05/29/B1_20230529112726A006.png',
					posterUrl: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4'
				},
				{
					id: '2',
					name: '123',
					posterImg: '/profile/upload/2023/05/29/B3_20230529112808A008.png',
					posterUrl: 'http://www.w3school.com.cn/example/html5/mov_bbb.mp4'
				},
			],
    }
   },
   methods: {
		getImgUrl(img) {
			return this.montageImgUrl(img)
		},
		detail(item, index) {
			this.tabCurr = index
			this.info = item
		},
		closeVideo() {
			document.getElementById('my-video').pause()
			this.show = false
		},
		playVideo(item) {
			this.popInfo = item
			this.show = true
			// document.getElementById('my-video').play()
		}
	}
}
</script>

<style scoped>
.boss{
    width: 100%;
    height: 6rem;
    background-color: pink;
}
</style>